<template>
	<view class='pageBox pageTwo'>
		<swiper class='swiperClass' autoplay indicator-color="#a39f99" indicator-active-color="#f49641" indicator-dots
			interval="2000" duration="1000" previous-margin="60px" next-margin="60px" circular :autoplay="true" @change="bindchange"
			style='height: {{swiperHeight}}px'>
			<swiper-item v-for="(item, index) in imgUrls" :key="index">
				<image :src="item" class="slide-image {{swiperIdx == index ? 'active' : 'quiet'}}" mode='aspectFill'> </image>
			</swiper-item>
		</swiper>
	</view>
	
	<view id="title">
		<span >健康知识</span> 
		<span style="float:right;color: darkgray;"> 了解更多--></span> 
	</view>
	
	<view class="parentCss">
		<image src="/static/images/sleep2.jpg"
			style="width: 140px;height:100px;border-radius: 10rpx;margin-left: 5px;"></image>
		<image src="/static/images/drink.jpg"
			style="width: 140px;height:100px;border-radius: 10rpx;margin-left: 5px;"></image>
		<image src="/static/images/run.jpg"
			style="width: 120px;height:100px;border-radius: 10rpx;margin-left: 5px;"></image>
	</view>
	
	<view id="title">
		<span >互动社区</span>  
	</view>

	<view class="pinglun" v-for="item in articleArr" :key="item._id">
		<view class="row">
			<view class="ptitle">
				<image src="/static/images/fit.jpg" id="touxiang"></image>
				<view class="name-title" >
					<view class="name">{{item.name}}</view>
					<view style="color: darkgray;font-size: small; ">
						<uni-dateformat 
						:date="item.posttime"
						:threshold="[60000, 3600000]"
						format="MM-dd"></uni-dateformat>
					</view>
				</view>
		   </view>
		   <view style="background-color: #66cdaa;color: white;font-size: 25rpx;margin-right: 15px;
		   margin-top: 20px; margin-bottom:20px; padding: 3px;border-radius: 3px; height: 20px; width: 30px;align-items: center;justify-content: center;">
			   问题
		   </view>
		</view>
		
		<view class="neirong">
			<image v-if="item.picurls && item.picurls.length" :src="item.picurls[0]" style="width: 900px;height: 130px;margin: 10px;" mode="aspectFill"></image>
			<image v-else src="/static/images/lossPhoto.jpg" style="width: 900px;height: 130px;margin: 10px;" mode="aspectFill"></image>
			<view class="wenzi">
				<view style="font-weight: 600;margin-top: 10px;">{{item.title}}</view>
				<view style="margin-top: 5px;color: gray;" class="zhengwen">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
	
	<view class="pinglun">
		<view class="ptitle">
			<image src="/static/images/doctor.jpg" id="touxiang"></image>
			<view class="name-title" >
				<view class="name">胡医师（专家团）</view>
				<view style="color: darkgray;font-size: small;">2分钟前</view>
			</view>
			<view style="background-color: #66cdaa;color: white;font-size: 25rpx;margin-right: 15px;
			margin-top: 20px; margin-bottom:20px; padding: 3px;border-radius: 3px; height: 20px; width: 30px;align-items: center;justify-content: center;">
				经验 
			</view>
		</view>
		
		<view class="neirong">
			<image src="/static/images/hot.jpg" style="width: 600px;height: 130px;margin: 10px;" mode="aspectFill"></image>
			<view class="wenzi">
				<view style="font-weight: 600;margin-top: 10px;">感冒多喝水会加快恢复吗？</view>
				<view style="margin-top: 5px;color: gray;" class="zhengwen"> 感冒期间大量喝水会导致体内钠离子流失过快，导致体内机能激素紊乱，反而不利于恢复。</view>
			</view>
		</view>
	</view>
	<navigator url="/pages/addMessage/addMessage">
		
		<view class="goEdit">
			<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
		</view>
		
	</navigator>
	</template>

<script>
export default {
	data() {
		return {
			imgUrls: [
				'/static/images/run.jpg',
				'/static/images/keep.png',
				'/static/images/sleep.jpg',
			],
			swiperIdx: 0,
			swiperHeight: 0 ,// 确保这个值在合适的地方被赋值
			
			articleArr:[]
		};
		
	},
	
	onLoad() {
		this.getData();		
	},
	//触底方法
	onReachBottom() {
		this.getData();
	},
	
	onPullDownRefresh() {
		this.articleArr = []
		this.getData();
	},
	
	methods: {
		// 轮播效果二 
		bindchange(e) {
			this.swiperIdx = e.detail.current;
		},
		//获取数据，下拉停止
		getData(){
			uniCloud.callFunction({
				name:"showFun-cloud",
				data:{
					skip:this.articleArr.length
				}
			}).then(res=>{
				console.log(res);
				let oldList = this.articleArr;
				let nsList = [...oldList,...res.result.data]
				this.articleArr=nsList
				uni.stopPullDownRefresh()
			})
		}
	},
	mounted() {
		// 你可以在这里计算swiperHeight的值
	}
}
</script>

<style>
/* pages/knowledge/knowledge.wxss */
.pageTwo .swiperClass {
	width: 100%;
	margin: 0;
	margin-top: 30px;
}

.pageTwo .slide-image {
	width: 100%;
	height: 90%;
	border-radius: 10px;
	position: relative;
	box-shadow: 0 0 10px rgba(0, 0, 0, .8)
}

.pageTwo image.active {
	transform: none;
	transition: all 0.2s ease-in 0s;
}

.pageTwo image.quiet {
	transform: scale(0.8333333);
	transition: all 0.2s ease-in 0s;
}

#title {
	margin: 20px;
	font-size: larger;
	font-weight: 600;
}

.parentCss {
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: relative;
}

.childCss1 {
	position: absolute;
	left: 20%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-weight: bold;
}

.childCss2 {
	position: absolute;
	left: 45%;
	top: 40%;
	color: white;
	font-weight: bold;
}

.childCss3 {
	position: absolute;
	left: 75%;
	top: 40%;
	color: white;
	font-weight: bold;
}

.pinglun {
	margin: 20px;
	margin-top: 10px;
	background-color: oldlace;
	border-radius: 20px;
}


#touxiang {
	height: 50px;
	width: 50px;
	border: 1px solid #66cdaa;
	border-radius: 30px;
	margin: 15px;
}


/* .pinglun view {
	font-weight: 600;
	margin-left: 10px;
	margin-bottom: 10px;
} */
.pinglun .row{
	height: 70px;
	display: flex;
	justify-content: space-between;
}
.pinglun .ptitle{
	display: flex;
}

.pinglun .name{
	margin-top: 20px;
	font-weight: 600;
	float: left;
}

.pinglun .name-title{
	display: flex;
	flex-direction: column;
}

.neirong {
	font-weight: 600;
	display: flex;
}

.neirong view{
	margin: 5px;
}

.neirong .wenzi{
	width: 900px;
	height: 50px;
	padding-right: 5px;
}

.neirong .wenzi .zhengwen{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}


.goEdit{
	width:100rpx;
	height: 100rpx;
	background: #66cdaa;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-size: 50rpx;
	position: fixed;
	right: 60rpx;
	bottom: 100rpx;
	box-shadow: 0 0 20rpx rgba(23, 207, 198,0.6);
}
</style>
